<template>
  <div>
    <div class="tit">
      基本信息
    </div>
    <table>
      <tr>
        <th>
          所属标段
          <span class="red">*</span>
        </th>
        <td>
          {{towerObject.stageName}}
        </td>
        <td> 
          {{towerObject.sectionName}}
        </td>
        <th>
          自编号
          <span class="red">*</span>
        </th>
        <td>
          {{towerObject.code}}
        </td>
      </tr>
      <tr>
        <th>
          设备标识
          <span class="red">*</span>
        </th>
        <td colspan="2">
          {{towerObject.deviceName}}
        </td>
        <th>
          绑定监控设备
        </th>
        <td>
          <p v-if="towerObject.referName || towerObject.deviceSn">{{towerObject.referName}} (SN: {{towerObject.deviceSn}})</p>
        </td>
      </tr>
      <tr>
        <th>自有设备</th>
        <td colspan="2">
          <zz-radio
            style="width: 100px"
            :key="item.id"
            :value = "item.id"
            v-for="item in radioList"
            @handle="handleRadio"
            :checked = item.check>
            {{item.name}}
          </zz-radio>
        </td>
        <th v-if="towerObject.isSelf">设备编码</th>
        <td v-if="towerObject.isSelf">{{towerObject.companyCode}}</td>
      </tr>
    </table>
    <!-- 设备资料 -->
    <div class="tit">
      设备资料
    </div>
    <table>
      <tr>
        <th>
          生产厂家
        </th>
        <td>
          {{towerObject.producerName}}
        </td>
        <th>
          规格型号
        </th>
        <td>
          {{towerObject.modelName}}
        </td>
      </tr>
      <tr>
        <th>
          出厂编号
        </th>
        <td>
          {{towerObject.outNumber}}
        </td>
        <th>
          出厂日期
        </th>
        <td>
          {{towerObject.outDate}}
        </td>
      </tr>
      <tr>
        <th>初始登记号</th>
        <td>
          {{towerObject.initialNumber}}
        </td>
        <th>最大安装高度(米)</th>
        <td>
          {{towerObject.maxHigh}}
        </td>
      </tr>
      <tr>
        <th>使用年限</th>
        <td>
          {{towerObject.useYear}}
        </td>
        <th>进场日期</th>
        <td>
          {{towerObject.enterTime}}
        </td>
      </tr>
      <tr class="takePic">
         <th>设备安装性能表<br/>(拍照上传)</th>
        <td colspan="3">
          <zz-preview
           margin="10px 10px 0 0"
           v-for="file in picList"
           :item="file"
           :info=true
           :key="file.id"
           :isAuth = true
           :th = 2
           imgWidth="185px" >
          </zz-preview>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { getGroupRefer, getTowerDevice } from '../../../service/api.js'

export default {
  name: 'noeditTowerInfo',
  computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        radioList: [
          {id: 1, check: false, name: '是'},
          {id: 2, check: false, name: '否'}
        ],
        towerObject: {
          deviceType: 2,  // 设备类型  1.升降机，2塔机
          id: '',					 //设备id   --》有则对设备修改，无则新建设备
          code: '',			    // 自编号  			(必填)
          deviceName: '',		     //设备标识			(必填)
          referId	:'',		     //绑定监控设备		(必填)
          sourceDid:'',
          isSelf:'',			     //是否自有设备		(必填) 1是 0否
          companyCode:'',        //  企业统一设备编码	
          producerId :'',         // 生产厂家id			
          producerName  :'',     //  生产厂家名称		
          modelId  :'',          //  规格型号id			
          modelName :'',          // 规格型号名称		
          outNumber :'',          // 出厂编号			
          outDate	:'',		     //出厂日期				（String类型）
          initialNumber:'',      //  初始登记号			
          maxHigh:'',            //  最大安装高度		
          setupCapability :[],    // 设备安装性能表		
          projectId :'',         //  项目ID				
          insertUser:'',	       //  插入人				
          stageId :'',           //  分期id				
          sectionId :'',         //  标段id				
          companyId :'',         //  企业id				
          departmentId:'',       //  部门id				
          mid:'' ,                 // 人员id
          useYear: '' , //使用年限
          enterTime: ''  //进厂日期
        },
        groupRefer: [], // 监控列表
        picList: []
      }
    },
    props: {
      towerItem: {
        type: Object,
        default: {}
      },
      projectId: '',
      date: '' //出厂日期
    },
    mounted () {
      this.getInfo()
      this.getGroup()
    },
    methods: {
      // 获取设备档案
      getInfo () {
        getTowerDevice({
          coId: this.currentUser.coId,
          mid: this.currentUser.mid,
          pjId: this.projectId,
          deviceType: 2,
          deviceId: this.towerItem.deviceId  // 设备id
        }).then( res => {
          this.towerObject = res.data
          this.picList = res.data.fileList
          if (this.towerObject.isSelf === 1) {
            this.radioList[0].check = true
            this.radioList[1].check = false
          } else {
            this.towerObject.companyCode = ''
            this.radioList[0].check = false
            this.radioList[1].check = true
          }
          if (!this.towerObject.referId) {
            this.towerObject.referId = ''
          }
          if (this.towerObject.outDate) {
            this.towerObject.outDate = this.$moment(Number(this.towerObject.outDate)).format('YYYY-MM-DD')
          }
          if (this.towerObject.enterTime) {
            this.towerObject.enterTime = this.$moment(Number(this.towerObject.enterTime)).format('YYYY-MM-DD')
          }
        }).catch( err => {
          console.log(err)
        })
      },
      // 获取监控列表
      getGroup () {
        getGroupRefer({
          coId: this.currentUser.coId,
          mid: this.currentUser.mid,
          pjId: this.projectId,
          deviceType: 2
        }).then( res => {
          this.groupRefer = res.data
          for (let i = 0; i<this.groupRefer.length; i++) {
            if (this.towerObject.referId && this.groupRefer[i].referId === this.towerObject.referId) {
              this.towerObject.deviceName = this.groupRefer[i].deviceName
              this.towerObject.deviceSn = this.groupRefer[i].deviceSn
            }
          }
        }).catch( err => {
          console.log(err)
        })
      },
      handleRadio (value) {
        return;
      },
      close () {
        this.towerObject = {
          deviceType: 2,  // 设备类型  1.升降机，2塔机
          id: '',					 //设备id   --》有则对设备修改，无则新建设备
          code: '',			    // 自编号  			(必填)
          deviceName: '',		     //设备标识			(必填)
          referId	:'',		     //绑定监控设备		(必填)
          isSelf:'',			     //是否自有设备		(必填) 1是 2否
          sourceDid: '',
          companyCode:'',        //  企业统一设备编码	
          producerId :'',         // 生产厂家id			
          producerName  :'',     //  生产厂家名称		
          modelId  :'',          //  规格型号id			
          modelName :'',          // 规格型号名称		
          outNumber :'',          // 出厂编号			
          outDate	:'',		     //出厂日期				（String类型）
          initialNumber:'',      //  初始登记号			
          maxHigh:'',            //  最大安装高度		
          setupCapability :[],    // 设备安装性能表		
          projectId :'',         //  项目ID				
          insertUser:'',	       //  插入人				
          stageId :'',           //  分期id				
          sectionId :'',         //  标段id				
          companyId :'',         //  企业id				
          departmentId:'',       //  部门id				
          mid:'' ,                 // 人员id
          useYear: '', //使用年限
          enterTime: ''   // 进厂日期
        },
        this.$emit('close')
      } 
    }
}
</script>

<style lang="scss" scoped>
  .tit {
    font-weight: bold;
    border-left: 2px solid $color;
    padding-left: 10px;
  }
  table {
    margin: 15px 0;
    border: 1px solid #e6e6e6;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    .producer-input,.modelName-input {
      position: absolute;
      top: 10px;
      height: 18px;
      z-index: 1;
      width: 200px;
    }
    tr {
      height: 38px;
    }
    .takePic {
      height: 80px;
      th {
        text-align: center;
        padding: 0;
        line-height: 24px;
      }
      td {
        .icon-plus {
          width: 30px;
          height: 30px;
        }
      }
    }
    th,td {
      border: 1px solid #e6e6e6;
      padding-left: 16px;
    }
    th {
      background: #eff0f2;
      color: #989898;
      text-align: left;
      font-weight: 500;
      width: 150px;
    }
    td {
      position: relative;
      width: 250px;
      input {
        border: 0;
        width: 90%;
      }
      .chooseBtn {
        color: $color;
        position: absolute;
        right: 10px;
        top: 11px;
        font-size: 14px;
        border:0;
      }
    }
  }
  .footer-button {
    position: absolute;
    bottom: 0;
    width: 938px;
    margin-left: -20px;
    margin-bottom: -20px;
    background: #f0f4f5;
    height: 66px;
    text-align: right;
    button {
      margin-top: 15px;
      background: #fff;
      &:hover {
        background: $color;
      }
    }
  }
  .groupReferGroup {
    height: 50px;
    margin-bottom: 5px;
    position: relative;
    .left-side{
      float: left;
      padding-right: 20px;
      i {
        color: #fff;
        font-size: 36px;
        display: block;
        text-align: center;
        background: $color;
      }
    }
    .right-side {
      >div {
        padding-bottom: 10px;
      }
    }
    .icon-success {
      position: absolute;
      right: 0;
      top: 0;
      color: $color;
      display: none;
    }
  }
  .choosed {
    .icon-success {
      display: block;
    }
  }
</style>

